import { deepCopy, ergodicList, getComponentByKey, getParentChildrenByKey } from "../../lib/utils"
import Draggable from 'vuedraggable'
import EventBus from "../../EventBus"
import "./index.less"
import Icon from "../../Icon/index.jsx"
import { getAllAnalysisComponentTypes } from "../../lib/analysisData"

export default {
  name: "Layer",
  data() {
    return {
      list: [],
      title: ""
    }
  },
  created(){
    EventBus.$once("canvasComponentListChange", data => {
      this.list = this.reverse(deepCopy(data))
    })
  },
  computed: {
    multipleKeys(){
      // return this.$store.state.lowCode.selectedComponent.key
      return this.$store.state.lowCode.multipleKeys
    },
    renderList(){
      const {
        list,
        title,
        filterTitle
      } = this
      return filterTitle(list, title)
    }
  },
  methods: {
    handleChange(event){
      const {
        componentKey
      } = event.item.dataset

      const {parent, index} = getParentChildrenByKey(this.list, componentKey)
      const reverseOldIndex = index // parent.length - 1 - index
      const reverseNewIndex = event.newDraggableIndex // parent.length - 1 - event.newDraggableIndex
      console.log(event,reverseOldIndex, reverseNewIndex)
      const newItem = deepCopy(parent[reverseNewIndex])
      parent[reverseNewIndex] = parent[reverseOldIndex]
      parent[reverseOldIndex] = newItem

      EventBus.$emit("setSelectComponentUpdateList", {type: 2, data: this.reverse(deepCopy(this.renderList))})
    },
    handleClick(component){
      console.log(component)
      // const index = this.list.findIndex(item => item.key === key)

      EventBus.$emit("selectComponent", component.key)
    },
    handleEyeClick(component, event){
      event.preventDefault()
      event.stopPropagation()
      // component.isShow = !component.isShow
      EventBus.$emit("setComponentShow", {
        key: component.key,
        isShow: !component.isShow
      })
    },
    renderItem(item){
      const { multipleKeys, renderItem, handleClick,renderDraggable,handleEyeClick } = this
      const {
        key,
        label,
        props,
        isShow,
        type,
        icon
      } = item
      let chartId
      const analysisTypes = getAllAnalysisComponentTypes()
      let componentType
      if (analysisTypes.includes(type)){
        componentType = 'analysis'
        chartId = props.value.dasChartTypeId || props.value.chartTypeId
      }
      else {
        chartId = icon
      }
      const header = (item) => <div onClick={() => handleClick(item)} class="title">
        <Icon type={componentType} chartId={chartId} />
        <div class="text">{item.label}</div>
        <a-icon onClick={e => handleEyeClick(item,e)} class="icon taggle-show" type={isShow ? 'eye' : 'eye-invisible'} />
      </div>

      return (
        <div
          key={key}
          class={`item draggable ${multipleKeys.includes(key) ? 'active' : ''}`}
          data-component-key={key}
          >
          {header(item)}
            {
              props.list && (
                <div class="content">
                  {
                    props.list.map(tab => (
                      <div class={`item tab ${tab.value === props.value ? 'tab-active' : ''}`}>
                        <div class="title"><a-icon class="icon" type="tag" /><div class="text">{tab.label}</div></div>
                        <div class="content">{
                          renderDraggable(tab.children)
                        }</div>
                      </div>

                    ))
                  }
                </div>
              )
            }

        </div>
      )
    },
    renderDraggable(list){
      const {
        handleChange,
        filterTitle,
        title,
        handleSearch
      } = this
      return (
        <div class="layer-list">
          {/* <a-input-search placeholder="搜索标题" onSearch={handleSearch} /> */}
          <Draggable list={list} onUpdate={handleChange} draggable='.draggable'>
            {
              list.map(item => this.renderItem(item))
            }
          </Draggable>
        </div>
      )
    },
    filterTitle(list, title){
      console.log(title)
      return list.filter(item => {
        return (item.props.title || item.text || item.label).indexOf(title) > -1
      })
    },
    handleSearch(){

    },
    handleSearchChange(event){
      this.title = event.target.value
    },
    reverse(list){
      // reverse翻转数组会修改原数组
      list.reverse()
      ergodicList(list, component => {
        component.props.list?.reverse()
      })
      return list
    }

  },
  components: {
    Draggable,
    Icon
  },
  render() {
    const {
      handleSearchChange,
      title,
      renderList
    } = this
    return (
      <div class="layer-container">
        <a-input value={title} placeholder="搜索标题" onChange={handleSearchChange} class="title-search">
          <a-icon slot="prefix" type="search" />
        </a-input>
        {
          this.renderDraggable(renderList)
        }
      </div>
    )
  }
}
